<template>
	<view class="detail">
		<view class="swiper">
			<swiper class="detail-swipers" circular="true" duration="300" @change="handleChange">
				<swiper-item v-for="(item,index) in detail.item_small_pictures" :key="index">
					<view class="list-swiper">
						<image mode="widthFix" @click="seeImg(index)" :src="item"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="indicator">
				{{indicator}}/{{detail.item_small_pictures.length}}
			</view>
		</view>
		<view class="detail-basic">
			<view class="prices">
				<view class="price">
					<text>{{detail.item_final_price || '0.00'}}</text>
					<text>{{detail.item_price || '0.00'}}</text>
				</view>
				<!-- <view class="volume" v-if="detail.item_volume>0">
					<text>{{calculation(detail.item_volume || '0')}}人已抢</text>
				</view> -->
			</view>
			<view class="ret">
				<text>下单立返</text>
				<text class="solid">|</text>
				<text>{{commissionAmount(detail.commission_amount || '0.00')}} sg</text>
			</view>
			<view class="name fex2">
				<text class="plaform">{{platformType(detail.item_platform) || '京东'}}</text>
				<text class="title">{{detail.item_title}}</text>
			</view>
			<view class="collect-coupons">
				<view class="collect-content" v-if="detail.coupon_price>0">
					<view class="collect-left">
						<text>{{Number(detail.coupon_price).toFixed(1)}}</text>
					</view>
					<view class="collect-right">
						<view class="collect-text">
							<text class="collect-title">优惠券</text>
							<text v-if="detail.coupon_start_time">
								{{couponTime(detail.coupon_start_time)}}-{{couponTime(detail.coupon_end_time)}}
							</text>
						</view>
						<view class="collect-btn" @click="goBuy()">
							<text>立即领券</text>
						</view>
					</view>
				</view>
				<view class="collect-content node-collect" v-else>
					<text>暂无优惠券</text>
				</view>
			</view>
		</view>
		<!-- <view class="shop" v-if="detail.seller_name">
			<view class="shop-left">
				<image src="../../../static/images/erweima.png" mode=""></image>
				<text>{{detail.seller_name}}</text>
			</view>
			<view class="shop-right">
				<text class="go-shop">进入店铺</text>
				<text class="iconfont icon-dayu"></text>
			</view>
		</view> -->
		<view class="baby-detail">
			<view class="baby-title">
				<text>宝贝详情</text>
			</view>
			<view class="baby-content">
				<view class="baby-image" v-for="(item,index) in detail.item_small_pictures" :key="index">
					<image mode="widthFix" :src="item"></image>
				</view>
			</view>
		</view>
		<view class="detail-bottom" :class="$isPC ? 'IsPC':''">
			<view class="bottom-lists">
				<view class="bottom-list" @click="goPage('/pages/index/index')">
					<text class="iconfont icon-index"></text>
					<text>首页</text>
				</view>
				<view class="bottom-list" @click="copy()">
					<text class="iconfont icon-kouling"></text>
					<text>{{go_link_obj.code ? '口令' : '链接'}}</text>
				</view>
			</view>
			<view class="go-buy" v-if="detail.coupon_price>0" @click="goBuy()">
				<text class="buy">购买</text>
				<text class="province">省</text>
				<text class="money">{{Number(detail.coupon_price).toFixed(1) || '0.00'}}</text>
			</view>
			<view class="go-buy" v-else @click="goBuy()">
				<text class="buy">下单</text>
				<text class="province">返</text>
				<text class="trf">{{commissionAmount(detail.commission_amount) || '0.00'}}sg</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		platformType,
		formatDateDay
	} from "@/utils/util.js"
	import {
		detail,
		cpsLink
	} from "@/api/duomai.js"
	// #ifdef APP-PLUS
	import {
		TAOBAOISLOGIN,
		TAOBAOLOGIN,
		TAOBAOLOGOUT,
		TAOBAOOPENBYURL,
		JOINGDONGOPENURL
	} from "@/utils/duomai.js"
	// #endif
	import {mapState} from "vuex";
	export default {
		name: "detail",
		components: {},
		data() {
			return {
				indicator: 1,
				detail: {
					commission_amount:'0',
					item_small_pictures:[]
				},
				custom_type: 1,
				go_link_obj: {}
			}
		},
		async onLoad(option) {
			let shopStr = uni.getStorageSync("shop")
			if (shopStr) {
				let shop = JSON.parse(shopStr);
				if (shop.custom_type === 1) {
					this.detail = shop;
				} else {
					let res = await detail({
						id: option.id,
						custom_type: shop.custom_type
					})
					if (res.code === 1) {
						res.data.data.coupon_start_time =
							formatDateDay(res.data.data.coupon_start_time * 1000);
						res.data.data.coupon_end_time =
							formatDateDay(res.data.data.coupon_end_time * 1000);
						this.detail = res.data.data;
					}else{
						this.detail = shop;
					}
				}
				//类型 1淘宝 2京东 3拼多多 4考拉 5唯品会 6苏宁易购
				this.custom_type = shop.custom_type;
				let data;
				if (this.detail.item_url) {
					data = {
						url: this.detail.item_url
					}
				} else {
					data = {
						product_id: this.detail.item_id,
					}
				}
				let linkRes = await cpsLink(data)
				if (linkRes.code === 1) {
					this.go_link_obj = linkRes.data.data
				}
			}
		},
		computed:{
			...mapState(['isLogin']),
		},
		methods: {
			goPage(url) {
				uni.switchTab({
					url: url
				})
			},
			copy() {
				if(!this.isLogin){
					uni.navigateTo({
						url:"/pages/entrance/login/login"
					})
					return
				}
				if (this.go_link_obj.code) {
					uni.setClipboardData({
						data: this.go_link_obj.code,
						success: function() {}
					});
				} else {
					let url = this.go_link_obj.short_url || this.go_link_obj.url;
					let link = `--------------
							点击链接打开页面后,即可领券下单
							${url}
							海量优惠券戳我>>https://zkmmax.com`;
					uni.setClipboardData({
						data: link,
						success: function() {}
					});
				}
			},
			platformType(name) {
				return platformType(name)
			},
			couponTime(val) {
				let timeStr = (val.split(" "))[0];
				let time = timeStr.split("-");
				return time[1] + '月' + time[2] + '日'
			},
			handleChange(e) {
				this.indicator = e.detail.current + 1
			},
			calculation(val) {
				if (val > 10000) {
					val = Math.ceil(val / 10000) + '万+'
					return val
				}
				return val
			},
			commissionAmount(val) {
				val = Math.ceil(Number(val.replace(/,/g, ''))*20);
				return val;
			},
			seeImg(index) {
				uni.previewImage({
					current: index, //预览图片的下标
					urls: this.detail.item_small_pictures,
					//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			async goBuy() {
				if(!this.isLogin){
					uni.navigateTo({
						url:"/pages/entrance/login/login"
					})
					return
				}
				// #ifdef H5
				//淘宝 天猫商品 H5
				window.open(this.go_link_obj.short_url || this.go_link_obj.url);
				// #endif
				// #ifdef APP-PLUS
				if (this.custom_type == 1) {
					//1淘宝 天猫商品 H5
					let bool = await TAOBAOISLOGIN();
					if (!bool) {
						await TAOBAOLOGIN();
						await TAOBAOOPENBYURL(this.go_link_obj.short_url || this.go_link_obj.url);
						return
					}
					await TAOBAOOPENBYURL(this.go_link_obj.short_url || this.go_link_obj.url);
				} else if (this.custom_type == 2) {
					//2京东
					await JOINGDONGOPENURL(this.go_link_obj.short_url || this.go_link_obj.url)
				} else {
					//类型 3拼多多 4考拉 5唯品会 6苏宁易购
					this.openApp()
				}
				// #endif
			},
			//打开app 
			openApp() { 
				let deep_link = "";
				let url = "";
				if(this.go_link_obj.deep_link){
					deep_link = this.go_link_obj.deep_link;
					if(this.go_link_obj.short_url){
						url = this.go_link_obj.short_url
					}else{
						url = this.go_link_obj.url
					}
				}else{
					let link;
					if(this.go_link_obj.short_url){
						link = this.go_link_obj.short_url;
						url = this.go_link_obj.short_url
					}else{
						link = this.go_link_obj.url;
						url = this.go_link_obj.url
					}
					link.replace("http://", "").replace("https://", "");
					if(this.custom_type == 3){
						deep_link = "pinduoduo://"+link;
					}
					if(this.custom_type == 4){
						deep_link = "kaola://"+link;
					}
					if(this.custom_type == 5){
						deep_link = "vipshop://"+link;
					}
					if(this.custom_type == 6){
						deep_link = "suning://"+link;
					}
				}
				// 3拼多多 4考拉 5唯品会 6苏宁易购
				plus.runtime.openURL(deep_link,function(res){
					 plus.runtime.openURL(url)  
				});
			}
		}
	}
</script>

<style lang="less" scoped src="./detail.less">
</style>
